<template>
    <div id='tousu'>
        <h1 style="text-align: center;">投诉页面</h1>

        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="投诉人的姓名" prop="complaintName">
                <el-input v-model="form.complaintName" placeholder="请输入投诉人的姓名" />
            </el-form-item>
            <el-form-item label="投诉人的手机号" prop="complaintPhone">
                <el-input v-model="form.complaintPhone" placeholder="请输入投诉人的手机号" />
            </el-form-item>
            <el-form-item label="邮箱" prop="mailbox">
                <el-input v-model="form.mailbox" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="投诉标题" prop="cTitle">
                <el-input v-model="form.cTitle" placeholder="请输入投诉标题" />
            </el-form-item>
            <el-form-item label="图片" prop="companySrc">
                <image-upload v-model="form.companySrc" />
            </el-form-item>

            <el-form-item label="被投诉人的名字" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入被投诉人的名字" />
            </el-form-item>
            <el-form-item label="被投诉人的单位电话" prop="companyPhone">
                <el-input v-model="form.companyPhone" placeholder="请输入被投诉人的单位电话" />
            </el-form-item>
            <el-form-item label="内容" prop="companyContent">
                <el-input type="textarea" v-model="form.companyContent" :min-height="192" />
            </el-form-item>
            
            <el-button type="primary" @click="submitForm(formName)">提交</el-button>
            <el-button @click="cancel">重置</el-button>
        </el-form>

    </div>
</template>

<script>
//！！！！1.引入2.注册.3使用
//例如：import 《组件名称》 from '《组件路径》';
import { addComplain, } from "@/api/system/complain";

export default {
    name: 'tousu-demo',
    //这里注册
    components: {},
    dicts: ['c_type'],
    data() {
        var complaintPhone = (rule, value, callback) => {
            if (!value) {
                return new Error("请输入电话号码");
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                const isPhone = reg.test(value);
                value = Number(value); //转换为数字
                if (typeof value === "number" && !isNaN(value)) {//判断是否为数字
                    value = value.toString(); //转换成字符串
                    if (value.length < 0 || value.length > 12 || !isPhone) { //判断是否为11位手机号
                        callback(new Error("手机号码格式如:138xxxx8754"));
                    } else {
                        callback();
                    }
                } else {
                    callback(new Error("请输入电话号码"));
                }
            }
        };
        //这里存放数据
        return {
            form: {},
            rules: {
                complaintName: [
                    { required: true, message: '请输入投诉人的姓名', trigger: 'blur' },
                    { min: 2, message: '长度最少2个字符', trigger: 'blur' },
                    {
                        validator: function (rule, value, callback) {
                            if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                                callback(new Error("请输入中文"));
                            } else {
                                //校验通过
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                companyPhone: [
                    { required: true, message: '请输入公司的电话', trigger: 'blur' },
                    { min: 9, message: '请输入正确的电话', trigger: 'blur' },

                ],
                cTitle: [
                    { required: true, message: '请输入投诉标题', trigger: 'blur' },
                ],
                complaintPhone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                    { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
                ],
                companyName: [
                    { required: true, message: '被投诉人不能为空', trigger: 'blur' },
                    { min: 3, message: '被投诉人最少为两个字符', trigger: 'blur' }
                ],
                companyContent: [
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                    // {oninput:value=value.replace(/[^\d.]/g,''),message:"收入只能输入数字"}
                ],
                mailbox: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    {
                        validator: function (rule, value, callback) {
                            if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
                                callback(new Error("请正确输入邮箱"));
                            } else {
                                //校验通过
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ]
            },


        };
    },
    //计算属性 类似于data概念
    computed: {},
    methods: {
        /** 提交按钮 */
        submitForm(formName) {
            addComplain(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");

            });
            
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                complaintId: null,
                complaintName: null,
                complaintPhone: null,
                mailbox: null,
                cTitle: null,
                companySrc: null,
                companyContent: null,
                companyName: null,
                companyPhone: null,
                cType: 0
            };
        }
    },

    //生命周期 - 创建完成（可以访问当前this实例身上的data和methods）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
}
</script>
<style></style>
